@mixin checkbox {
  @apply bg-gray-50 border-gray-200 dark:(bg-gray-900 border-gray-700) border-2 rounded-lg h-6 w-6 focus:(ring-0 border-gray-200 dark:border-gray-700) hover:border-primary cursor-pointer disabled:opacity-70 disabled:hover:border-gray-200 disabled:hover:dark:border-gray-700 disabled:cursor-default;
  &:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"),
      linear-gradient(to top right, var(--un-gradient-stops));
    @apply border-transparent dark:border-transparent;
  }
}
@font-face {
  font-family: "NunitoVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/nunito-latin-variable-wghtOnly-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "NunitoVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/nunito-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrainsMonoVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("/jetbrains-mono-wghtOnly-normal.woff2") format("woff2");
}
kbd {
  font-family: "JetBrainsMonoVariable", monospace;
}
.font-mono {
  font-family: "JetBrainsMonoVariable", monospace;
}
#side-panel > div {
  height: 100%;
}

.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
.prose-output,
.prose-editor {
  img.ProseMirror-separator {
    display: none !important;
  }
  p,
  ul,
  ol,
  blockquote {
    @apply relative;
  }
  :where(p, ul, ol, blockquote):hover .ProseMirror-widget[data-widget="draggableText"] {
    @apply opacity-100;
  }
  // Drag handle
  .ProseMirror-widget[data-widget="draggableText"] {
    @apply absolute h-full flex justify-center items-start w-10 top-0 -left-10 opacity-0;
    padding-top: 5px;

    > svg {
      @apply w-full cursor-pointer rounded-full text-gray-500 dark:text-gray-400 h-6 fill-current;
    }
  }

  > * > .ProseMirror {
    @apply pt-4 pb-48;
  }
  .tableWrapper {
    @apply overflow-x-auto mb-1;
    &::-webkit-scrollbar {
      @apply w-2 h-2 rounded-lg bg-gray-100 dark:bg-gray-800;
    }
    &::-webkit-scrollbar-thumb {
      @apply bg-gray-200 rounded-lg dark:bg-gray-900;
    }
  }
  table {
    overflow: visible;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;

    tbody {
      width: 100%;
    }

    tr {
      @apply border-2 border-gray-300 dark:border-gray-700;
    }
    td,
    th {
      @apply text-left font-500 border-2 border-gray-300 dark:border-gray-700 relative p-2 vertical-top;
      min-width: 100px;
      border-style: none solid solid none;
      word-break: break-all;
    }
    td {
      @apply bg-gray-100 dark:bg-gray-800;
    }
    th {
      @apply bg-gray-50 dark:bg-gray-900;
    }
    tr:first-child {
      td,
      th {
        border-top-style: solid;
      }
    }
    tr {
      td,
      th {
        &:first-child {
          border-left-style: solid;
        }
      }
    }
    p {
      @apply p-0 m-0;
    }
    &.selected td:after,
    &.selected th:after,
    .selectedCell:after {
      @apply bg-primary;
      opacity: 0.1;
      content: "";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      pointer-events: none;
      position: absolute;
      z-index: 2;
    }

    .column-resize-handle {
      @apply bg-primary absolute w-0.5 -bottom-0.5 -top-0.5 -right-0.5 z-10 pointer-events-none;
    }
    &.resizing {
      .code-block-editor {
        @apply hidden;
      }
      .code-block-placeholder {
        @apply flex;
      }
    }
  }

  font-kerning: none;
  :where(h1, h2, h3, h4, h5, h6):not(:where(.not-prose, .not-prose *)) {
    &::before,
    &::before,
    &::before,
    &::before,
    &::before,
    &::before,
    .open-slash-menu > button {
      @apply font-bold dark:bg-gray-900 dark:border-gray-700;
      font-family: "JetBrainsMonoVariable", monospace;
      position: absolute;
      left: -2.5rem;
      background: #f9fafb;
      height: 2rem;
      width: 2rem;
      justify-content: center;
      display: flex;
      align-items: center;
      color: #6b7280;
      border-radius: 25%;
      font-size: 1rem;
      line-height: 1rem;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      //border: 2px solid #e5e7eb;
      @apply border-2;
      opacity: 1;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .open-slash-menu {
    @apply m-0 relative;
    & > button {
      @apply mt-4;
    }
  }
  .open-slash-menu {
    button {
      font-size: 1.25em;
      line-height: 1.25em;
      font-weight: 600;
    }
  }
  :where(h1):not(:where(.not-prose, .not-prose *))::before {
    top: calc(2.25em * 1.25 * 0.5 + 0.25em);
    content: "H1";
  }
  :where(h2):not(:where(.not-prose, .not-prose *))::before {
    top: calc(1.75em * 1.25 * 0.5 + 0.25em);
    content: "H2";
  }

  :where(h3):not(:where(.not-prose, .not-prose *))::before {
    top: calc(1.375em * 1.25 * 0.5 + 0.25em);
    content: "H3";
  }
  :where(h4):not(:where(.not-prose, .not-prose *)) {
    line-height: 2.1rem;
    &::before {
      top: calc(2.1rem * 0.5);
      content: "H4";
    }
  }
  :where(h5):not(:where(.not-prose, .not-prose *)) {
    line-height: 2.1rem;
    &::before {
      top: calc(2.1rem * 0.5);
      content: "H5";
    }
  }
  :where(h6):not(:where(.not-prose, .not-prose *)) {
    font-size: 0.875em;
    line-height: 2.1rem;
    &::before {
      top: calc(2.1rem * 0.5);
      content: "H6";
    }
  }
  :where(ul p, ol p):not(:where(.not-prose, .not-prose *)) {
    @apply m-0;
  }
  :where(ul:not([data-type="taskList"]) li > * + *, ol li > * + *):not(
      :where(.not-prose, .not-prose *)
    ) {
    // @apply my-5;
  }
  :where(li > ul, li > ol, li > div > ul, li > div > ol):not(:where(.not-prose, .not-prose *)) {
    //@apply m-0;
  }
  :where(ul[data-type="taskList"]):not(:where(.not-prose, .not-prose *)) {
    padding-left: 0rem;
    > li {
      padding-left: 0.5rem;
      display: flex !important;
      justify-content: start;
      align-items: start;
      min-height: 1.75em;
      min-width: 1rem;
      label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
        min-height: 1.75em;
        input {
          @include checkbox;
        }
      }
      > div {
        min-width: 1rem;
      }
    }
  }
  :where(hr):not(:where(.not-prose, .not-prose *)) {
    @apply rounded-full border  border-gray-200 dark:border-gray-700;
    margin: 1.25rem 0;
    &.ProseMirror-selectednode {
      @apply border border-primary;
    }
  }
  :where(u) {
    text-decoration: underline wavy;
  }
}

.form-checkbox {
  @include checkbox;
}
.prose {
  --un-prose-lists: #6b7280;
  --un-prose-hr: #6b7280;
  --un-prose-invert-lists: #9ca3af;
  --un-prose-invert-hr: #9ca3af;
  --highlighted-thread: "";
  :where(div > .ProseMirror, .content, blockquote, li, td, th) {
    &
      > :where(div, ul, ol, p, blockquote, hr):not(.ProseMirror-gapcursor)
      + :where(div, ul, ol, p, blockquote, hr, h1, h2, h3, h4, h5, h6):not(
        [data-element="true"],
        .ProseMirror-widget:not(:has([data-collab-cursor]))
      ),
    &
      > :where(div, ul, ol, p, blockquote, hr):not(
        [data-element="true"],
        .ProseMirror-gapcursor,
        .ProseMirror-widget:not(:has([data-collab-cursor]))
      )
      + :where(div, ul, ol, p, blockquote, hr, h1, h2, h3, h4, h5, h6):not(
        .ProseMirror-widget:not(:has([data-collab-cursor]))
      ),
    &
      > :where(div, ul, ol, p, blockquote, hr):not(.ProseMirror-gapcursor)
      + .ProseMirror-gapcursor
      + :where(div, ul, ol, p, blockquote, hr, h1, h2, h3, h4, h5, h6):not(
        [data-element="true"],
        .ProseMirror-widget:not(:has([data-collab-cursor]))
      ),
    &
      > :where(div, ul, ol, p, blockquote, hr):not(
        [data-element="true"],
        .ProseMirror-gapcursor,
        .ProseMirror-widget:not(:has([data-collab-cursor]))
      )
      + .ProseMirror-gapcursor
      + :where(div, ul, ol, p, blockquote, hr, h1, h2, h3, h4, h5, h6):not(
        .ProseMirror-widget:not(:has([data-collab-cursor]))
      ) {
      @apply mt-5;
    }
  }

  :where(div[data-element="true"]) {
    .content > :first-child,
    .content > .ProseMirror-gapcursor:first-child + *,
    .content > :first-child > div > [data-node-view-wrapper="true"],
    .content > .ProseMirror-gapcursor:first-child + * > div > [data-node-view-wrapper="true"] {
      margin-top: 0 !important;
    }
    .content > :last-child,
    .content > .ProseMirror-gapcursor:last-child + *,
    .content > :last-child > div > [data-node-view-wrapper="true"],
    .content > .ProseMirror-gapcursor:last-child + * > div > [data-node-view-wrapper="true"] {
      margin-bottom: 0 !important;
    }
  }
  :where(blockquote):not(:where(.not-prose, .not-prose *)) {
    @apply border-l-3 pl-5.5 border-solid border-gray-300 dark:border-gray-700 not-italic text-gray-500 dark:text-gray-400;
  }
  :where(pre, code):not(:where(.not-prose, .not-prose *)) {
    &::before,
    &::after {
      content: unset !important;
    }
    @apply bg-gray-200 text-gray-700 font-medium dark:bg-gray-900 dark:text-gray-300 py-1 px-2 rounded-lg whitespace-pre-wrap;
    font-family: "JetBrainsMonoVariable", monospace !important;
  }
  :where(mark) {
    @apply text-gray-700;
  }
  :where(span[data-comment]) {
    @apply text-primary relative;

    &::after {
      content: "";
      @apply bg-primary opacity-20 absolute w-full h-full top-0 left-0 pointer-events-none;
    }

    .active {
      @apply text-secondary relative;

      &::after {
        content: "";
        @apply bg-secondary opacity-20 absolute w-full h-full top-0 left-0 pointer-events-none;
      }
    }
  }
}
.prose-output {
  :where(p, ul, ol, pre):not(:where(.not-prose, .not-prose *)) {
    margin: 0.375rem 0;
  }
  :where(h1, h2, h3, h4, h5, h6):not(:where(.not-prose, .not-prose *)) {
    &:before {
      display: none;
    }
    margin: 0.375rem 0 !important;
  }
  pre {
    @apply bg-gray-100 dark:bg-gray-800 leading-5 px-3 py-2 whitespace-pre-wrap;
    &::-webkit-scrollbar {
      @apply bg-gray-100 dark:bg-gray-800 border rounded-bl-lg rounded-br-lg w-2 h-4;
    }
    &::-webkit-scrollbar-thumb {
      @apply bg-gray-50 dark:bg-gray-900 border-4 border-4 border-solid border-gray-100 dark:border-gray-800 rounded-lg;
    }
    &::-webkit-scrollbar-track {
      @apply mx-2;
    }
    code {
      padding: 0;
      @apply bg-transparent dark:bg-transparent text-gray-500 dark:text-gray-400;
    }
  }
  code {
    @apply bg-gray-100 dark:bg-gray-800 rounded-md px-1;
  }
}
@supports (not selector(::-webkit-scrollbar)) {
  .scrollbar-sm {
    scrollbar-color: #e2e8f0 #f8fafc;
    scrollbar-width: thin;
    &-dashboard {
      scrollbar-color: #f8fafc #e2e8f0;
    }
  }
  .dark {
    .scrollbar-sm {
      scrollbar-color: #1e293b #0f172a;

      &-contrast,
      &-dashboard {
        scrollbar-color: #0f172a #1e293b;
      }
    }
  }
}
.scrollbar-sm {
  &::-webkit-scrollbar {
    @apply w-2 h-2 rounded-lg bg-gray-50 dark:bg-gray-900;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-lg dark:bg-gray-800;
  }
  &-contrast,
  &-dashboard {
    &::-webkit-scrollbar {
      @apply w-2 h-2 rounded-lg bg-gray-100 dark:bg-gray-800;
    }
    &::-webkit-scrollbar-thumb {
      @apply bg-gray-200 rounded-lg dark:bg-gray-900;
    }
  }
}

::-webkit-scrollbar {
  @apply w-4 bg-white rounded-lg dark:bg-gray-900;
}
::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-lg dark:bg-gray-800;
}
.scrollbar-contrast {
  &::-webkit-scrollbar {
    @apply w-4 rounded-lg bg-gray-100 dark:bg-gray-800;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-lg dark:bg-gray-900;
  }
}
.scrollbar-dashboard {
  &::-webkit-scrollbar {
    @apply w-5 h-5 rounded-xl bg-gray-100 dark:bg-gray-800;
  }
  &::-webkit-scrollbar-thumb {
    @apply rounded-xl bg-gray-200 dark:bg-gray-900 border-6 border-solid border-gray-100 dark:border-gray-800;
  }
  &::-webkit-scrollbar-corner {
    @apply bg-gray-100 dark:bg-gray-800;
  }
}

.narrow-prose {
  :where(p, ul, ol, pre):not(:where(.not-prose, .not-prose *)) {
    line-height: inherit;
    margin: 0;
  }
  :where(blockquote):not(:where(.not-prose, .not-prose *)) {
    margin: 0;
  }
}
.ProseMirror .monaco-editor,
.ProseMirror .monaco-editor > *:first-child {
  @apply rounded-b-none;
}
.split-view[data-code-editor-theme="dark"] .monaco-diff-editor {
  .original .overflow-guard {
    @apply md:(border-r-1 border-gray-700);
  }
  .modified .overflow-guard {
    @apply md:(border-l-1 border-gray-700);
  }
}

.split-view[data-code-editor-theme="light"] .monaco-diff-editor {
  .original .overflow-guard {
    @apply md:(border-r-1 border-gray-200);
  }
  .modified .overflow-guard {
    @apply md:(border-l-1 border-gray-200);
  }
}

.monaco-editor .editor-widget {
  @apply overflow-hidden;
  border-radius: 0.5rem !important;
}
.monaco-editor .monaco-hover {
  border-radius: 0.5rem !important;
}
.rounded-editor-2xl {
  .monaco-editor,
  .monaco-editor > *:first-child {
    @apply rounded-2xl;
  }
}
.rounded-editor-t-2xl {
  .monaco-editor,
  .monaco-editor > *:first-child {
    border-top-left-radius: calc(1rem - 2px);
    border-top-right-radius: calc(1rem - 2px);
  }
}

.rounded-editor-lg {
  .monaco-editor,
  .monaco-editor > *:first-child {
    @apply rounded-lg;
  }
}
.customized-editor-show-keyboard-hidden {
  [widgetid="editor.contrib.ShowKeyboardWidget"] {
    display: none !important;
  }
}
.customized-editor {
  --customized-editor-background: #f9fafb;
  --customized-editor-widget-background: #f3f4f6;
  .mtk2 {
    color: var(--customized-editor-background);
  }
  .monaco-editor {
    .inputarea.ime-input {
      background-color: var(--customized-editor-background);
    }
    .view-overlays .current-line {
      background-color: var(--customized-editor-widget-background) !important;
      @apply border-gray-300 border-0;
    }
    .view-overlays > *:last-child:first-child .current-line {
      background-color: transparent !important;
    }
    --vscode-editor-background: var(--customized-editor-background);
    --vscode-editorStickyScroll-background: var(--customized-editor-background);
    --vscode-breadcrumb-background: var(--customized-editor-background);
    --vscode-editorGutter-background: var(--customized-editor-background);
    --vscode-editorMarkerNavigation-background: var(--customized-editor-background);

    // Editor Widget
    .find-widget {
      background-color: var(--customized-editor-widget-background);
    }
    --vscode-editorWidget-background: var(--customized-editor-widget-background);
    --vscode-quickInput-background: var(--customized-editor-widget-background);
    --vscode-editorHoverWidget-background: var(--customized-editor-widget-background);
    --vscode-listFilterWidget-background: var(--customized-editor-widget-background);
    --vscode-checkbox-selectBackground: var(--customized-editor-widget-background);
    --vscode-breadcrumbPicker-background: var(--customized-editor-widget-background);
  }
}
.customized-editor-contrast {
  --customized-editor-background: #f3f4f600;
  --customized-editor-widget-background: #f9fafb;
}
.dark {
  .customized-editor {
    --customized-editor-background: #11182700;
    --customized-editor-widget-background: #1f2937;
  }
  .customized-editor-contrast {
    --customized-editor-background: #1f293700;
    --customized-editor-widget-background: #111827;
  }
}
.iPadShowKeyboard {
  @apply hidden;
}
[data-highlight-diff="added"] {
  @apply relative;
  &::after {
    content: "";
    @apply bg-green-500 opacity-10 absolute w-full h-full top-0 left-0 pointer-events-none;
  }
}
[data-highlight-diff="removed"] {
  @apply relative;
  &::after {
    content: "";
    @apply bg-red-500 opacity-10 absolute w-full h-full top-0 left-0 pointer-events-none;
  }
}
[data-highlight-diff="changed"] {
  @apply relative;
  &::after {
    content: "";
    @apply bg-blue-500 opacity-5 absolute w-full h-full top-0 left-0 pointer-events-none;
  }
}

p[data-highlight-diff],
span[data-highlight-diff] {
  &::after {
    @apply w-full left-0;
  }
}
[data-highlight-diff="added"]:where(span) {
  @apply text-green-500 bg-green-500 bg-opacity-10;
  &::after {
    content: none;
  }
}
[data-highlight-diff="removed"]:where(span) {
  @apply text-red-500 bg-red-500 bg-opacity-10;
  &::after {
    content: none;
  }
}
[data-highlight-diff="changed"]:where(span) {
  @apply text-blue-500 bg-blue-500 bg-opacity-10;
  &::after {
    content: none;
  }
}
